<template>
    <div class="container">
        <index-toptab :data="ToptabList" @handle="handle"></index-toptab>
        <div class="list">
            <index-list :NoticeList="NoticeList" @getNotice="getNotice" @onLoading="onLoading" @onRefresh="onRefresh"></index-list>
        </div>
        <div class="tip">
            <div class="item" v-if="loading">没有更多了</div>
            <div class="item" v-else>加载中...</div>
        </div>
    </div>
</template>

<script>
import IndexToptab from '../components/Common/TopTab/Index'
import IndexList from '../components/Index/List/Index'
export default {
    name: 'PageIndex',
    components: {
        IndexList,
        IndexToptab
    },
    data() {
        return {
            NoticeList: [],
            ToptabList: [
                { text:'推荐' },
                { text:'娱乐' },
                { text:'游戏' },
                { text:'生活' }
            ],
            isOne: true,
            page: 0,
            loading: false
        }
    },
    methods: {
        //获取新闻列表
        getNotice() {
            if(this.isOne) {
                this.isOne = false
                this.$get(`notice/list.php?page=${this.page}`)
                .then((res) => {
                    res.forEach(e => {
                        this.NoticeList.push(e)
                        this.isOne = true
                    })
                    if(res.length >= 10){
                        this.page++
                    }
                    if(res.length == 0){
                        this.loading = true
                    }
                })
            }
        },
        handle(e) {
            console.log(e)
        },
        //点击刷新按钮
        onRefresh() {
            this.NoticeList = []
            this.page = 0
            this.loading = false
            this.getNotice()
        },
        //子组件传值更改状态
        onLoading(e) {
            this.loading = e
        },
        //滚动到最底部加载数据
        lazyLoading() {
            if(this.$route.path == '/') {
                var scrollTop = document.querySelector('.container').scrollTop
                var clientHeight = document.documentElement.clientHeight
                var scrollHeight = document.querySelector('.container').scrollHeight
                // console.log(scrollTop,clientHeight,scrollHeight)
                if(scrollTop + clientHeight >= scrollHeight && this.loading == false) {
                    this.getNotice()
                }
            }
        },
        //节流
        throttle(fn,delay) {
            let valid = true
            return function() {
                if(!valid) {
                    return false 
                }
                valid = false
                setTimeout(() => {
                    fn()
                    valid = true;
                }, delay)
            }
        }
    },
    created() {
        this.getNotice()
    },
    //监听滚动条
    mounted() {
        window.addEventListener('scroll',this.throttle(this.lazyLoading,1000),true)
    },
    //进入页面触发,从sessionStorage中取出高度,并给到DOM
    activated() {
        this.$nextTick(() => {
            if(sessionStorage.getItem('scroll')) {
                document.querySelector('.container').scrollTop=sessionStorage.getItem('scroll')
            }
        })
    },
    //离开页面之前通过sessionStorage存储页面高度
    beforeRouteLeave(to,from,next) {
        window.removeEventListener('scroll',this.throttle(this.lazyLoading))
        sessionStorage.setItem('scroll',document.querySelector('.container').scrollTop)
        next()
    },
}
</script>

<style lang="scss" scoped>
.container{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    overflow: auto;
    background:#fff;
    width:100vw;
    min-height:100vh;
    padding-top:0.5rem;
    padding-bottom:1rem;
    .tip{
        font-size:0.28rem;
        color:#666;
        text-align: center;
        padding:0.4rem 0;
    }
}
</style>